<template>
  <div class="kzt">
    <div class="gg">
      <div class="cc">
        <i class="el-icon-s-promotion"></i>
        <span>{{maintenanceTotal}}</span>
        <p>今日维修任务</p>
      </div>
      <div class="cc1">
        <i class="el-icon-check"></i>
        <span>{{maintenanceFinishTotal}}</span>
        <p>今日维修完成</p>
      </div>
      <div class="cc2">
        <i class="el-icon-loading"></i>
        <span>{{maintenanceNotFinishTotal}}</span>
        <p>待执行维修</p>
      </div>
      <div class="cc3">
        <i class="el-icon-s-custom"></i>
        <span>{{maintenancePersonnelTotal}}</span>
        <p>今日维修人员</p>
      </div>
    </div>
    <div class="jdt" >
      <div class="jdtbt"  v-for="(v,i) in kn" :key="i">
        <div class="bm" >{{v.deptName}}</div>
        <div class="zt">
          <p>今日维修情况</p>
          <p id="zt1">
            <span style="color: #5fa4e2" >已完成{{v.succtotal}}</span>
            <span style="color: #b7bec9 ;" >/今日维修任务{{v.errtotal}}</span>
          </p>
           <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="v.pecrnt"
        class="jdtcd"
      ></el-progress>
        </div>
      </div>
    </div>
    <div ref="main" id="main" style="height: 500px">

    </div>
  </div>
</template>

<style lang="less" scoped>
.kzt {
  background: #f1f1f2;
}
.gg {
  width: 100%;
  height: 200px;
  display: flex;
  left: 10px;
  top: 10px;
  justify-content: space-evenly;
}
.cc,
.cc1,
.cc2,
.cc3 {
  width: 240px;
  height: 138px;
  margin: 5px;
}
.cc {
  background: url(https://cimg.axureshop.com/b6/f7/00/b6f70009a0254e6aaa427199a68c0dc1/images/%E6%8E%A7%E5%88%B6%E5%8F%B0/u78.png);
}
.cc1 {
  background: url(https://cimg.axureshop.com/b6/f7/00/b6f70009a0254e6aaa427199a68c0dc1/images/%E6%8E%A7%E5%88%B6%E5%8F%B0/u83.png);
}
.cc2 {
  background: url(https://cimg.axureshop.com/b6/f7/00/b6f70009a0254e6aaa427199a68c0dc1/images/%E6%8E%A7%E5%88%B6%E5%8F%B0/u88.png);
}
.cc3 {
  background: url(https://cimg.axureshop.com/b6/f7/00/b6f70009a0254e6aaa427199a68c0dc1/images/%E6%8E%A7%E5%88%B6%E5%8F%B0/u93.png);
}
i {
  font-size: 60px;
  margin: 25px;
  color: #ffffff;
}
span {
  border-width: 0px;
  width: 53px;
  height: 54px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 46px;
  color: #ffffff;
}
p {
  width: 97px;
  height: 19px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
  margin-left: 70px;
}
.jdt {
  width: 100%;
  background: #ffffff;
  padding-bottom: 50px;
}
.jdtbt {
  width: 100%;
  height: 100px;
  padding-top: 20px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
.bm {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #344563;
  margin-bottom: 20px;
}
.zt {
  display: flex;
  position: relative;
}
.zt i {
  font-size: 20px;
}
.zt p {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #344563;
  margin: 0px;
  text-align: center;
}
.zt p > span {
  width: 100px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: center;
}
#zt1 {
  width: 200px;
}
.jdtcd {
  width: 60%;
  margin-left: 20px;
}
#main{
    margin-top: 50px;
    background: #ffffff;
    
}
</style>

<script>
import * as echarts from "echarts";

export default {
  data:function(){
    return{
      maintenanceTotal:'',
      maintenanceFinishTotal:'',
      maintenanceNotFinishTotal:'',
      maintenancePersonnelTotal:'',
     kn:[],
      tableData:[
      ],
      weixiu1:[{
        name:'deptName',

      }]
    }
  },
  methods:{
    getData:function(){
      this.$axios({
        url:'/console/list',
        method:'get',
        data:{
          maintenanceTotal:this.maintenanceTotal,
          maintenanceFinishTotal:this.maintenanceFinishTotal,
          maintenanceNotFinishTotal:this.maintenanceNotFinishTotal,
          maintenancePersonnelTotal:this.maintenancePersonnelTotal,
          // repairSituations:{total:this.repairSituations.total},
          // repairCompleted:{total:this.repairCompleted.total}
        }
      }).then(({data})=>{
        console.log(data);
        this.maintenanceTotal = data.console.maintenanceTotal;
        this.maintenanceFinishTotal = data.console. maintenanceFinishTotal;
        this.maintenanceNotFinishTotal=data.console.maintenanceNotFinishTotal;
        this.maintenancePersonnelTotal=data.console.maintenancePersonnelTotal;
        
        for(let i=0;i<data.console.repairCompleted.length;i++){
          let jos={
          deptName:'',
          succtotal:0,
          errtotal:0,
          pecrnt:0
        };
        jos.deptName = data.console.repairCompleted[i].deptName;
        jos.succtotal=data.console.repairCompleted[i].total;
        jos.errtotal = data.console.repairSituations[i].total;
        jos.pecrnt=Math.ceil(data.console.repairCompleted[i].total/data.console.repairSituations[i].total*100);
        this.kn.push(jos);
        }
        console.log(this.kn);
        // this.tableData = data.console;
      })
    },
  },
  mounted: function () {
    var myChart = echarts.init(this.$refs.main);
    myChart.setOption({
      title: {
        text: "维修量统计",
      },
      tooltip: {},
      xAxis: {
        data: ["11日", "12日", "13日", "14日", "15日", "16日", "17日"],
      },
      yAxis: {
        name: "维修量(单)",
        type:'value'
      },
      series: [
        {
          
          data: [0, 5, 10, 15, 20, 25,1],
          type: "line",
          smooth: true,
        },
        {
           data: [10, 6, 20, 17, 16, 2,10],
          type: "line",
          smooth: true, 
        },
        {
           data: [2, 4, 14, 11, 9, 20,18],
          type: "line",
          smooth: true, 
        },
         {
           data: [23, 2, 9, 11, 20, 12,22],
          type: "line",
          smooth: true, 
        },
      ],
    });
     this.getData();
  }

};
</script>